<template>
	<z-nav-bar title="个人资料"></z-nav-bar>
	<view class="item-box" @click="selImg.open()">
		<view class="item flex_sbc">
			<view>头像</view>
			<image
				:src="setting.oss_pub_domain + (userInfoCheck.avatar || userInfo.avatar)"
				key="head-img"
				class="user-head"
			></image>
		</view>
	</view>
	<view class="item-box">
		<view class="item flex_sbc" @click="setItem('nickName')">
			<view>昵称</view>
			<view class="flex_fsc">
				<view class="u-line-1 right-box">{{ userInfoCheck.nickName || userInfo.nickName }}</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/more.png'" class="icon-size-32 uni-ml-12"></image>
			</view>
		</view>
	</view>
	<view class="item-box">
		<view class="item flex_sbc" @click="picker.open()">
			<view>性别</view>
			<view class="flex_fsc" v-if="setting.sys_user_sex && setting.sys_user_sex.length">
				<view>
					{{
						setting.sys_user_sex.filter(
							(item) => item.dictCode == (parseInt(userInfoCheck.sex) || parseInt(userInfo.sex) || 3)
						)[0].dictLabel
					}}
				</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/more.png'" class="icon-size-32 uni-ml-12"></image>
			</view>
		</view>
	</view>
	<view class="item-box">
		<view class="item flex_sbc" @click="setItem('phonenumber')">
			<view>手机号</view>
			<view class="flex_fsc">
				<view>{{ userInfoCheck.phonenumber || userInfo.phonenumber }}</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/more.png'" class="icon-size-32 uni-ml-12"></image>
			</view>
		</view>
	</view>

	<uni-datetime-picker type="date" :clear-icon="false" v-model="userInfo.birthday" @change="changeBirthday">
		<view class="item-box">
			<view class="item flex_sbc">
				<view>生日</view>
				<view class="flex_fsc">
					<view>{{ userInfoCheck.birthday || userInfo.birthday }}</view>
					<image :src="setting.oss_pub_domain + '/app-img/icon/more.png'" class="icon-size-32 uni-ml-12"></image>
				</view>
			</view>
		</view>
	</uni-datetime-picker>
	<view class="item-box">
		<view class="item flex_sbc" @click="setItem('address')">
			<view>居住地</view>
			<view class="flex_fsc">
				<view>{{ userInfoCheck.address || userInfo.address }}</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/more.png'" class="icon-size-32 uni-ml-12"></image>
			</view>
		</view>
	</view>
	<view class="item-box">
		<view class="item flex_sbc" @click="setItem('introduce')">
			<view>个人简介</view>
			<view class="flex_fsc">
				<view class="u-line-1 right-box">{{ userInfoCheck.introduce || userInfo.introduce }}</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/more.png'" class="icon-size-32 uni-ml-12"></image>
			</view>
		</view>
	</view>
	<view v-if="startState == 1" class="item-box">
		<view class="item flex_sbc" @click="areaExpertise">
			<view>擅长领域</view>
			<view class="flex_fsc">
				<view class="u-line-1 right-box">
					{{ userInfoCheck.expertiseAreashow || userInfo.expertiseAreashow }}
				</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/more.png'" class="icon-size-32 uni-ml-12"></image>
			</view>
		</view>
	</view>
	<view v-if="startState == 2" class="item-box">
		<view class="item flex_sbc" @click="currentPerformanceRef.open()">
			<view>当前成绩</view>
			<view class="flex_fsc">
				<view v-if="userInfoCheck.hisAvg || userInfo.hisAvg" class="u-line-1 right-box">
					{{ findLabel }}
				</view>
				<view v-else class="uni-585C66 z-font-22">请选择当前成绩</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/more.png'" class="icon-size-32 uni-ml-12"></image>
			</view>
		</view>
	</view>
	<uni-popup ref="area" type="bottom">
		<view class="area-box">
			<view class="flex_sbc flex_wrap">
				<view
					v-for="aa in areaList"
					:key="aa.id"
					class="select-item flex_sh"
					:class="[codeList.includes(aa.dictCode) ? 'active' : 'disable']"
					@click="selArea(aa.dictCode)"
				>
					{{ aa.dictLabel }}
				</view>
				<view class="select-item" style="height: 1rpx"></view>
				<view class="select-item" style="height: 1rpx"></view>
				<view class="select-item" style="height: 1rpx"></view>
			</view>
			<view class="flex_sac">
				<view class="submit-button" @click="submitArea">确定</view>
				<view class="clear-button" @click="area.close()">取消</view>
			</view>
		</view>
	</uni-popup>
	<selete-media ref="selImg" type="img" @done="selImgFun"></selete-media>
	<z-picker
		ref="picker"
		:props="pickerProps"
		:list="that.setting['sys_user_sex']"
		title="选择性别"
		@change="setSex"
	></z-picker>
	<z-picker
		ref="currentPerformanceRef"
		:props="currentPerformanceOptine"
		:list="$gc.score"
		title="当前成绩"
		@change="currentPerformance"
	></z-picker>
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog
			ref="inputClose"
			mode="input"
			:title="titleDic[editItem]"
			:value="inputValue"
			placeholder="请输入内容"
			@confirm="dialogInputConfirm"
		></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import SelectItem from '../../player/evaluation/evaluation-base/select-item';
import { getUserInfo, updateUserInfo, getUserCheck, getDictionary } from '@/api/user.js';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, computed } from 'vue';
import { mutations } from '@/uni_modules/uni-id-pages/common/store.js'
const { proxy: that } = getCurrentInstance();

const startState = uni.getStorageSync('start-state')

const userInfoCheck = ref({});
// 获取用户信息
onShow(() => {
	fetchData();
});
function fetchData() {
	getUserInfo().then((res) => {
		Object.assign(that.userInfo, res);
	});
	getUserCheck().then((res) => {
		userInfoCheck.value = res;
	});
}

const inputDialog = ref(),
	inputValue = ref(''),
	editItem = ref(),
	titleDic = { nickName: '修改昵称', phonenumber: '修改手机号', address: '修改地址', introduce: '修改简介' };
function setItem(item) {
	editItem.value = item;
	inputValue.value = userInfoCheck.value[item] || that.userInfo[item];
	inputDialog.value.open();
}
function dialogInputConfirm(e) {
	const postData = {};
	postData[editItem.value] = e;
	updateUserInfo(postData);
	console.log(editItem.value);
	userInfoCheck.value[editItem.value] = e;
}

// 更新性别
const picker = ref(''),
	pickerList = ref(),
	pickerProps = {
		label: 'dictLabel'
	};
function setSex(e) {
	console.log(e.dictCode);
	userInfoCheck.value.sex = e.dictCode;
	updateUserInfoFun({ sex: e.dictCode });
}

// 更新生日
function changeBirthday(e) {
	updateUserInfoFun({ birthday: e });
}
// 跟新头像
const selImg = ref('');
function selImgFun(avatar) {
	updateUserInfoFun({ avatar })
}

// 更新字段信息
function updateUserInfoFun(data = {}) {
	updateUserInfo(data).then(() => {
		that.tools.alert('用户信息更新成功');
		if (data.avatar) userInfoCheck.value.avatar = data.avatar
		if (data.hisAvg) userInfoCheck.value.hisAvg = data.hisAvg
		Object.assign(that.userInfo, data)
		console.log(userInfoCheck.value.hisAvg);
		// 同步头像到im
		mutations.updateUserInfo({avatar_file:{url:'https://golfpub.jgtygolf.com' + userInfoCheck.value.avatar,extname:userInfoCheck.value.avatar.split('.')[1],name:userInfoCheck.value.avatar.split('.')[0]}})
	});
}

// 擅长领域
const areaList = ref([]),
	area = ref(''),
	codeList = ref([]);
getDictionary().then((res) => {
	areaList.value = res;
});
function areaExpertise() {
	const expertiseArea = userInfoCheck.value.expertiseArea || that.userInfo.expertiseArea || []
	codeList.value = typeof expertiseArea === 'string' ? expertiseArea.split(',').map(item => parseInt(item)) : expertiseArea
	that.$nextTick(() => {
		area.value.open();
		that.$forceUpdate()
	})
}

function selArea(code) {
	const index = codeList.value.indexOf(code)
	if (index >= 0) codeList.value.splice(index, 1)
	else codeList.value.push(code)
}

function submitArea() {
	const labels = []
	codeList.value.forEach(item => {
		labels.push(areaList.value.filter(el => el.dictCode == item)[0].dictLabel)
	})
	userInfoCheck.value.expertiseAreashow = labels.join(',')
	that.userInfo.expertiseAreashow = labels.join(',')
	updateUserInfoFun({ expertiseArea: codeList.value.join(',') });
	userInfoCheck.value.expertiseArea = codeList.value
	area.value.close()
}

const currentPerformanceRef = ref(''), currentPerformanceOptine = {label: 'label'}
function currentPerformance(e) {
	const hisAvg = e.code
	updateUserInfoFun({ hisAvg })
}
const findLabel = computed(() => {
	const data =  that.$gc.score.filter(item => item.code == (userInfoCheck.value.hisAvg || that.userInfo.hisAvg))
	if (data[0]) return data[0].label
	else return '请选择当前成绩'
})
</script>

<style lang="scss">
page {
	background: $uni-F5F5F5;
}
</style>

<style lang="scss" scoped>
.item-box {
	width: 100vw;
	background: $uni-white;
	box-sizing: border-box;
	padding: 0 32rpx;
	.item {
		width: 100%;
		height: 112rpx;
		border-bottom: 2rpx solid $uni-F5F5F5;
		color: #333336;
		font-size: 32rpx;
	}
	.user-head {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
}

.right-box {
	width: 400rpx;
	text-align: right;
}

.area-box {
	width: 100vw;
	max-height: 500rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 0 0;
	box-sizing: border-box;
	padding: 32rpx;
	.submit-button {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 16rpx;
		background: $uni-text-color-main;
		color: #ffffff;
	}
	.clear-button {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 16rpx;
		border: 1px solid $uni-text-color-main;
		color: $uni-text-color-main;
	}
	.select-item {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		margin-right: 16rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.active {
		background: #008965;
		color: #ffffff;
	}

	.disable {
		background: #f0f2f5;
		color: #585c66;
	}
}

.cancel-account {
	width: 400rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	border-radius: 30rpx;
	background: #ff3033;
	color: #ffffff;
	position: fixed;
	bottom: 32rpx;
	left: 175rpx;
}
</style>
